<template>
    <div>
      <svg-icon class="icon" :icon-class="isFullscreen ? 'exit-fullscreen' : 'fullscreen'" @click="click" />
    </div>
  </template>
  
  <script>
  import screenfull from "screenfull";
  
  export default {
    name: "Screenfull",
    data() {
      return {
        isFullscreen: false,
      };
    },
    mounted() {
      this.init();
    },
    beforeDestroy() {
      this.destroy();
    },
    methods: {
      //根据页面判断全屏
      click() {
        this.$store.commit("SET_ISFULLSCREEN");
        console.log(this.$store.state.system.isFullScreen);
        // 找到要放大得页面
        let fullDiv = document.getElementById("box");
        if (fullDiv) {
          //找到后调用自带的toggle事件进行放大操作
          screenfull.toggle(box);
        } else {
          //判断浏览器是否支持该组件
          if (!screenfull.enabled) {
            this.$message({
              message: "you browser can not work",
              type: "warning",
            });
            return false;
          }
          //放大页面 左侧菜单栏不会隐藏
          screenfull.toggle();
        }
      },
      change() {
        this.isFullscreen = screenfull.isFullscreen;
      },
      init() {
        if (screenfull.enabled) {
          screenfull.on("change", this.change);
        }
      },
      destroy() {
        if (screenfull.enabled) {
          screenfull.off("change", this.change);
        }
      },
    },
  
  };
  </script>
  
  <style scoped lang="less">
 .screenfull-svg {
    display: inline-block;
    cursor: pointer;
    fill: #5a5e66;
    width: 20px;
    height: 20px;
    vertical-align: 10px;
  }
  .icon{
    color: white;
  }
</style>